/*
 * @Author: 自迩
 * @Date: 2022-02-08 20:13:47
 * @LastEditTime: 2022-03-22 10:55:50
 * @LastEditors: your name
 * @Description:
 * @FilePath: \silence-reader\src\components\NoteBox\index.jsx
 */
import React,{useState, useRef, useContext} from 'react'
import {toolBarPropsContext} from "../../pages/book"
import './index.css'


function NoteBox(props) {
    // console.log("俺是NoteBox");
    const {toolBarProps, toolBarDispatch} = useContext(toolBarPropsContext)
    let {noteBoxFlag, selectedText} = toolBarProps

    let [pushPromptFlag,setPushPromptFlag] = useState(false)
    let myInput = useRef(null)
    const handleMouseDown = (e)=>{
        e.stopPropagation()
    }

    const pushNote = (e)=>{
        // console.dir(myInput);
        let {addNote} = props
        localStorage.setItem(selectedText,myInput.current.value)
        setPushPromptFlag(true)

        setTimeout(()=>{
            toolBarDispatch({type:"noteBoxDisplay",data:false})
            setPushPromptFlag(false)
        },1000)

        addNote(selectedText)
    }


  return (
    <div className='noteBox' style={{visibility: noteBoxFlag? 'visible':'hidden'}} onMouseDown={handleMouseDown}>
        <div className='textareaBox'>
        <textarea ref={myInput} name="" id="" cols="30" rows="10" placeholder='写下这一刻的想法'></textarea>
        </div>
        <button className="pushBtn" onClick={pushNote}>发布</button>
        <div className='pushPrompt' style={{visibility:pushPromptFlag? 'visible':'hidden'}} >发布成功</div>
    </div>
  )
}

export default React.memo(NoteBox)